<template>
    <view class="order-detail">
      <!-- 内容 -->
      <scroll-view class="viewport" scroll-y>
        <!-- 顶部导航栏 -->
        <view class="navbar" :style="{ paddingTop: systermStore.safeArea.top + 'px' }">
          <view class="wrap">
            <navigator open-type="navigateBack" class="back icon-left"></navigator>
            <view :class="['title']">订单详情</view>
          </view>
        </view>
        <!-- 订单状态 -->
        <view class="overview" :style="{ paddingTop: systermStore.safeArea.top + 40 + 'px' }">
          <template v-if="detail.orderState === OrderState.DaiFuKuan">
            <view class="status icon-clock">等待付款</view>
            <view class="tips">
              <text>应付金额: ¥{{ 0.01 }}</text>
              <text class="countdown"> 支付剩余 </text>
              <uni-countdown :minute="countDown[0]" @timeup="onTimeUp" :second="countDown[1]" :showDay="false" start color="#fff" />
            </view>
            <view class="button">去支付</view>
          </template>
          <template v-else>
            <view class="status icon-clock">
              {{ OrderStateOptions[detail.orderState] }}
            </view>
          </template>
        </view>
        <!-- 商品信息 -->
        <view class="goods">
          <view class="item">
            <navigator v-for="item in detail.skus" :key="item.id" :url="`/pages/goods/index?id=${item.spuId}`"
              hover-class="none">
              <image class="cover" :src="item.image"></image>
              <view class="meta">
                <view class="name ellipsis">{{ item.name }}</view>
                <view class="type">{{ item.attrsText }}</view>
                <view class="price">
                  <view class="original">
                    <text class="symbol">¥</text>
                    <text>{{ item.curPrice }}</text>
                  </view>
                  <view class="actual">
                    <text class="text">实付: </text>
                    <text class="symbol">¥</text>
                    <text>{{ item.realPay }}</text>
                  </view>
                </view>
                <view class="quantity">x{{ item.quantity }}</view>
              </view>
            </navigator>
            <view class="action" v-if="detail.orderState === OrderState.YiWanCheng">
              <view class="button primary">申请售后</view>
              <navigator url="/pages/comments/publish/index" class="button">
                去评价
              </navigator>
            </view>
          </view>
          <!-- 合计 -->
          <view class="total">
            <view class="row">
              <view class="text">商品总价: </view>
              <view class="symbol">{{ detail.totalMoney }}</view>
            </view>
            <view class="row">
              <view class="text">运费: </view>
              <view class="symbol">{{ detail.postFee }}</view>
            </view>
            <view class="row paid">
              <view class="text">实付: </view>
              <view class="symbol primary">{{ detail.payMoney }}</view>
            </view>
          </view>
        </view>
        <!-- 订单信息 -->
        <view class="detail">
          <view class="title">订单信息</view>
          <view class="row">
            <view>订单编号: {{ detail.id }}</view>
            <view>下单时间: {{ detail.createTime }}</view>
            <view>
              支付方式: 在线支付
            </view>
            <view>
              支付渠道: 微信支付
            </view>
          </view>
        </view>
      </scroll-view>
  
      <!-- 底部工具 -->
      <view class="toobar" v-if="detail.orderState === OrderState.DaiFuKuan">
        <view @tap="orderPay" class="primary">去支付</view>
        <view class="default">取消订单</view>
      </view>
    </view>
  </template>
  <script setup>
  import { useSystermStore } from "@/store";
  import { geOrderDetailAPI } from "@/api/order";
  import { ref, computed } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import { OrderState, OrderStateOptions } from "./OrderConstance"; // 模板中用的数据 大部分 都是  ref 返回数据  - 响应式 
  
  
  
  const systermStore = useSystermStore()
  
  // 订单详情
  const detail = ref(null)
  // onLoad 生命周期 获取 url id
  onLoad(async ({ id }) => {
    const { result } = await geOrderDetailAPI(id);
    // const { result } = await geOrderDetailAPI('1709854165225705473');
    detail.value = result
  })
  
  // [分钟,秒]
  const countDown = computed(() => {
    // 处理时间... 
    const m = parseInt(detail.value.countdown / 60 % 60)
    // 剩下秒
    const s = parseInt(detail.value.countdown % 60)
    return [m, s]
  })
  // 倒计时时间到了 
const onTimeUp = () => {
  /* 
  1 修改订单的状态 => 已取消 
  2 考虑 页面模板 跟随发生改变 
   */
  detail.value.orderState = OrderState.YiQuXiao
}
  
  
  
  </script>
  <style lang="scss">
  .order-detail {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .navbar {
    width: 750rpx;
    color: #fff;
    background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  
    .title {
      height: 40px;
      line-height: 30px;
      text-align: center;
      font-size: 17px;
      font-weight: 500;
    }
  
    .android {
      text-align: left;
      padding-left: 42px;
    }
  
    .wrap {
      position: relative;
    }
  
    .back {
      position: absolute;
      left: 10px;
      top: 4px;
      line-height: 1;
      font-size: 23px;
      z-index: 9;
    }
  }
  
  .viewport {
    background-color: #f7f7f8;
  }
  
  .overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    padding-bottom: 30rpx;
    color: #fff;
    background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
    background-size: cover;
  
    .status {
      font-size: 36rpx;
  
      &::before {
        margin-right: 6rpx;
        font-weight: 500;
      }
    }
  
    .tips {
      margin-top: 30rpx;
      font-size: 24rpx;
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
  
      .countdown {
        margin-left: 10rpx;
      }
    }
  
    .button {
      width: 260rpx;
      height: 64rpx;
      text-align: center;
      line-height: 64rpx;
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #27ba9b;
      border-radius: 68rpx;
      background-color: #fff;
    }
  }
  
  .shipment {
    line-height: 1.4;
    padding: 0 20rpx;
    margin: 20rpx 20rpx 0;
    border-radius: 10rpx;
    background-color: #fff;
  
    .locate {
      background-image: url(https://static.botue.com/erabbit/static/images/locate.png);
  
      .user {
        font-size: 26rpx;
        color: #444;
      }
  
      .address {
        font-size: 24rpx;
        color: #666;
      }
    }
  
    .logistics {
      background-image: url(https://static.botue.com/erabbit/static/images/car.png);
      border-bottom: 1rpx solid #eee;
      position: relative;
  
      &::after {
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
        content: "\e6c2";
        font-family: "erabbit" !important;
        font-size: 32rpx;
        color: #666;
      }
  
      .message {
        font-size: 26rpx;
        color: #444;
      }
  
      .date {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  
  .shipment .locate,
  .shipment .logistics {
    min-height: 120rpx;
    padding: 30rpx 30rpx 25rpx 75rpx;
    background-size: 50rpx;
    background-repeat: no-repeat;
    background-position: 6rpx center;
  }
  
  .goods {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  
    .item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;
  
      navigator {
        display: flex;
      }
  
      .cover {
        width: 170rpx;
        height: 170rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }
  
      .meta {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
      }
  
      .name {
        height: 80rpx;
        font-size: 26rpx;
        color: #444;
      }
  
      .type {
        line-height: 1.8;
        padding: 0 15rpx;
        margin-top: 6rpx;
        font-size: 24rpx;
        align-self: flex-start;
        border-radius: 4rpx;
        color: #888;
        background-color: #f7f7f8;
      }
  
      .price {
        display: flex;
        margin-top: 6rpx;
        font-size: 24rpx;
      }
  
      .symbol {
        font-size: 20rpx;
      }
  
      .original {
        color: #999;
        text-decoration: line-through;
      }
  
      .actual {
        margin-left: 10rpx;
        color: #444;
      }
  
      .text {
        font-size: 22rpx;
      }
  
      .quantity {
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 24rpx;
        color: #444;
      }
  
      .action {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        padding: 30rpx 0 0;
      }
    }
  
    .action {
      .button {
        width: 200rpx;
        height: 60rpx;
        text-align: center;
        justify-content: center;
        line-height: 60rpx;
        margin-left: 20rpx;
        border-radius: 60rpx;
        border: 1rpx solid #ccc;
        font-size: 26rpx;
        color: #444;
      }
  
      .primary {
        color: #27ba9b;
        border-color: #27ba9b;
      }
    }
  
    .total {
      line-height: 1;
      font-size: 26rpx;
      padding: 20rpx 0;
      color: #666;
  
      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10rpx 0;
      }
  
      .symbol {
        &::before {
          content: "¥";
          font-size: 20rpx;
        }
      }
  
      .paid {
        font-size: 30rpx;
        color: #444;
      }
  
      .primary {
        color: #cf4444;
      }
    }
  }
  
  .detail {
    line-height: 1;
    padding: 30rpx 20rpx 0;
    margin: 20rpx 20rpx 0;
    font-size: 26rpx;
    color: #666;
    border-radius: 10rpx;
    background-color: #fff;
  
    .title {
      font-size: 30rpx;
      color: #444;
    }
  
    .row {
      padding: 20rpx 0;
  
      &>view {
        display: block;
        padding: 10rpx 0;
      }
    }
  }
  
  .toobar {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding: 30rpx 20rpx;
    background-color: #fff;
    box-shadow: 0 -4rpx 6rpx rgba(240, 240, 240, 0.6);
    position: relative;
    z-index: 9;
  
    &>view {
      width: 200rpx;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin-left: 15rpx;
      font-size: 26rpx;
      border-radius: 72rpx;
    }
  
    .default {
      color: #444;
      border: 1rpx solid #ccc;
    }
  
    .primary {
      color: #fff;
      background-color: #27ba9b;
    }
  }
  
  .popup-root {
    padding: 30rpx 30rpx 0;
    border-radius: 10rpx 10rpx 0 0;
    overflow: hidden;
  
    .title {
      font-size: 30rpx;
      text-align: center;
      margin-bottom: 30rpx;
    }
  
    .description {
      font-size: 28rpx;
      padding: 0 20rpx;
  
      .tips {
        color: #444;
        margin-bottom: 12rpx;
      }
  
      .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 1;
        padding: 15rpx 0;
        margin-bottom: 4rpx;
        color: #666;
      }
  
      .icon-ring {
        font-size: 38rpx;
        color: #999;
      }
  
      .icon-checked {
        font-size: 38rpx;
        color: #27ba9b;
      }
    }
  
    .footer {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0 40rpx;
      font-size: 28rpx;
      color: #444;
  
      .button {
        flex: 1;
        height: 72rpx;
        text-align: center;
        line-height: 72rpx;
        margin: 0 20rpx;
        color: #444;
        border-radius: 72rpx;
        border: 1rpx solid #ccc;
      }
  
      .primary {
        color: #fff;
        background-color: #27ba9b;
        border: none;
      }
    }
  }
  </style>